<template>
  <div class="screen-bg">
    <div class="header"></div>

    <div class="left-top">
      <PieEcharts :echartsData="chargingPie"></PieEcharts>
    </div>
    <div class="left-bottom">
      <LineEcharts :echartDatas="processMonitoring" />
    </div>

    <div class="right-top">
      <RightTopPanel :panelItems="chargingTop4" :percentage="percentage" />
    </div>
    <div class="right-center">
      <BarEcharts :echartDatas="chargingStatistics" />
    </div>
    <div class="right-bottom">
      <RightBootmSvg :dots="exceptionMonitoring" />
    </div>

    <div class="center">
      <CenterSvg />
    </div>
    <div class="bottom">
      <BottomPanel :panelItems="dataAnalysis" />
    </div>
  </div>
</template>

<script setup>
import PieEcharts from '@/components/pie-echarts.vue';
import LineEcharts from '@/components/line-echarts.vue';
import BarEcharts from '@/components/bar-echarts.vue'
import RightBootmSvg from '@/components/right-bottom-svg.vue'
import CenterSvg from '@/components/center-svg.vue'
import BottomPanel from '@/components/bottom-panel.vue'
import RightTopPanel from '@/components/right-top-panel.vue'
import { ref } from 'vue';
import { getPowerScreenData } from '@/services/index'
import {
  chargingPileData,
  processMonitoringData,
  chargingStatisticsData,
  exceptionMonitoringData
} from './config/home-data'

// 充电桩饱和比例
let chargingPie = ref(chargingPileData)
// 流程监控
let processMonitoring = ref(processMonitoringData)
// 充电桩数据分析
let chargingStatistics = ref(chargingStatisticsData)
// 异常监控
let exceptionMonitoring = ref(exceptionMonitoringData)
// 充电桩数据分析
let dataAnalysis = ref([])
// 充电桩Top4占比
let chargingTop4 = ref()
let percentage = ref(0)

// 发起网络请求
getPowerScreenData().then(res => {
  chargingPie.value = res.data.chargingPile.data
  processMonitoring.value = res.data.processMonitoring.data
  chargingStatistics.value = res.data.chargingStatistics.data
  exceptionMonitoring.value = res.data.exceptionMonitoring.data
  dataAnalysis.value = res.data.dataAnalysis.data

  chargingTop4.value = res.data.chargingTop4.data
  percentage.value = res.data.chargingTop4.totalPercentage
})

</script>

<style lang="scss" scoped>
// 相对于body绝对定位
.screen-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #070a3c;
  background-image: url(@/assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .header {
    position: absolute;
    top: 21px;
    height: 56px;
    left: 0;
    right: 0;
    background-image: url(@/assets/images/bg_header.svg);

  }

  .left-top {
    position: absolute;
    top: 116px;
    left: 16px;
    width: 536px;
    height: 443px;
    background-image: url(@/assets/images/bg_left-top.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .left-bottom {
    /* 定位 */
    position: absolute;
    bottom: 49px;
    left: 16px;
    width: 536px;
    height: 443px;
    /* 背景 */
    background-image: url(@/assets/images/bg_left_bottom.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .right-top {
    position: absolute;
    right: 17px;
    top: 96px;
    width: 519px;
    height: 327px;

    background-image: url(../assets/images/bg_right_top.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .right-center {
    position: absolute;
    right: 17px;
    top: 443px;
    width: 519px;
    height: 327px;

    background-image: url(../assets/images/bg_right_center.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .right-bottom {
    position: absolute;
    right: 17px;
    bottom: 49px;
    width: 519px;
    height: 242px;

    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url(../assets/images/bg_right_bottom.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;

  }

  .center {
    position: absolute;
    right: 540px;
    bottom: 272px;
    width: 823px;
    height: 710px;

    /* border: 5px solid pink; */
  }

  .bottom {
    position: absolute;
    right: 540px;
    bottom: 49px;
    width: 823px;
    height: 209px;

    background-image: url(../assets/images/bg_bottom.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>